<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue2</title>
	<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		#app {padding: 20px;}
		[v-cloak]{display: none;}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div><span v-for="n in arrNumber">{{n}}</span></div>
		<div :class="addClassName" :style="addStyleName">用计算属性添加的类名</div>
		<div class="row">
			<label class="col-sm-2 col-form-label">单价：</label>
			<div class="col-sm-4"><input class="form-control" type="text" v-model="page1[0].price"></div>
			<label class="col-sm-2 col-form-label">数量：</label>
			<div class="col-sm-4"><input class="form-control" type="text" v-model="page1[0].count"></div>
			<label class="col-sm-2 col-form-label">单价：</label>
			<div class="col-sm-4"><input class="form-control" type="text" v-model="page1[1].price"></div>
			<label class="col-sm-2 col-form-label">数量：</label>
			<div class="col-sm-4"><input class="form-control" type="text" v-model="page1[1].count"></div>
		</div>
		<div>总价：<span v-text="totalPrice"></span></div>
		<div v-text="reverse"></div>
		<button class="btn" id="dollar">用$选中</button>
		<button class="btn btn-primary btn-sm" @click="count++">增加</button>
		<button class="btn btn-primary btn-sm" @click.once="count++">只增加一次</button>
		<p v-text=count></p>
		<input type="text" class="form-control form-control-sm w-25" @keyup.enter="keyUpFun" v-model.trim="keyupVal" placeholder="回车弹出输入内容">
		<input type="checkbox" value="apple1" id="apple" v-model="checkArr"><label v-red for="apple">apple</label>
		<input type="checkbox" value="banana1" id="banana" v-model="checkArr"><label v-blue for="banana">banana</label>
		<input type="checkbox" value="pear1" id="pear" v-model="checkArr"><label for="pear">pear</label>
		<p v-text=checkArr></p>
		<select id="" v-model="selectCon">
			<option value="">请选择</option>
			<option value="aaa2">aaa</option>
			<option value="bbb2">bbb</option>
		</select>
		<p v-text=selectCon></p>
		<zsz></zsz>
		<zhengshize v-bind:mess="myMess"></zhengshize>
		<input type="text" v-model="myMess">
		<ol>
			<list v-for="item in lists" v-bind:toli=item :key=item.id></list>
		</ol>
		<button class="btn btn-primary btn-sm" @click="addOneLineFun">添加一行</button>
		<input v-fo v-model="inputText">
	</div>


	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<!-- <script src="https://cdn.bootcss.com/vue/1.0.28/vue.js"></script> -->
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.js"></script>

	<!-- <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script> -->
	
	<script type="text/javascript">
		// 全局组件
		Vue.component("zsz",{
			template:'<p class="text-primary">全局组件</p>'
		});

		// 注册一个全局自定义指令 v-focus
		Vue.directive('focus', {
			// 当绑定元素插入到 DOM 中。
			inserted: function(el) {
				// 聚焦元素
				el.focus()
			}
		});
		// 全局指令 v-red
		Vue.directive("red",function(el,binding){
			el.style.color = "red";
		});

		var app = new Vue({
			el:"#app",
			data:{
				lists:[
					{id:1,text:"a"},
					{id:2,text:"b"},
					{id:3,text:"c"},
					{id:4,text:"d"}
				],
				count:0,
				keyupVal:"",
				checkArr:[],
				selectCon:"",
				myMess:"局部组件",
				reverseMsg:"zhengshize,zsz",
				page1:[
					{
						name:'zsz1',
						price:100,
						count:2
					},
					{
						name:"zsz2",
						price:50,
						count:4
					}
				],
				addClass:true,
				addClassPrimary:true,
				addStyleFS:"16px",
				addStyleColor:"#666",
				arrNumber:20,
				inputText:""
			},
			methods:{
				showAlert:function(){
					alert("a");
				},
				keyUpFun(){
					alert(this.keyupVal);
				},
				init:function(ev){
					console.log(ev);
				},
				// 添加一行内容
				addOneLineFun:function(){
					this.lists.push({
						"id":"0",
						"text":this.inputText
					})
				}
			},
			computed:{
				reverse:function(){
					return this.reverseMsg.split(",").reverse().join(",");
				},
				totalPrice:function(){
					var p = 0;
					for(var i = 0; i < this.page1.length;i++){
						if (!isNaN(this.page1[i].price) && !isNaN(this.page1[i].count)) {
							p += this.page1[i].price * this.page1[i].count
						}else{
							alert("不是数字");
						}
					}
					return p;
				},
				addClassName:function(){
					return {
						"btn":this.addClass,
						"btn-primary":this.addClassPrimary
					}
				},
				addStyleName:function(){
					return {
						"fontSize":this.addStyleFS,
						"color":this.addStyleColor
					}
				}
			},
			mounted:function(){
				this.init("初始化调用");
			},
			// 局部组件
			components:{
				"zhengshize":{
					props:["mess"],
					template:"<p class='text-danger'>{{mess}}</p>"
				},
				"list":{
					props:["toli"],
					template:"<li>{{toli.text}}</li>"
				}
			},
			// 局部指令
			directives:{
				// 注册一个局部指令v-fo
				"fo":{
					// 指令定义
					inserted:function(el){
						el.focus();
					}
				},
				blue:function(el,binding){
					el.style.color = "blue";
				}
			}
		});
		app.init("在外部调用");
	</script>
</body>
</html>